<template>
  <div class="order-create">
    <!-- 头部 -->
    <div class="header">
      <div class="logo">
        <img src="@/assets/logo.png" alt="logo">
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="content">
      <!-- 订单信息 -->
      <el-card class="order-info">
        <div class="car-info">
          <div class="car-img">
            <el-image 
              :src="carInfo.cimg" 
              fit="cover"
              :preview-src-list="[carInfo.cimg]"
            ></el-image>
          </div>
          <div class="car-detail">
            <h3>{{ carInfo.cname }}</h3>
            <p>{{ carInfo.cinfo }}</p>
          </div>
        </div>

        <div class="store-info">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="time-block pickup">
                <h4><i class="el-icon-position"></i> 开始</h4>
                <p class="time">{{ takeTime }}</p>
                <p class="address">台州 椒江市府大道店</p>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="time-block return">
                <h4><i class="el-icon-position"></i> 结束</h4>
                <p class="time">{{ getTime }}</p>
                <p class="address">台州 椒江市府大道店</p>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>

      <!-- 费用明细 -->
      <el-card class="fee-detail">
        <div slot="header">
          <span>费用明细</span>
        </div>
        
        <el-row class="fee-item">
          <el-col :span="12">车辆租赁及服务费</el-col>
          <el-col :span="8">¥{{ carInfo.crent }}×2</el-col>
          <el-col :span="4" class="amount">¥{{ carInfo.crent * 2 }}</el-col>
        </el-row>

        <el-row class="fee-item">
          <el-col :span="12">基础服务费</el-col>
          <el-col :span="8">¥50×2</el-col>
          <el-col :span="4" class="amount">¥100</el-col>
        </el-row>

        <el-row class="fee-item">
          <el-col :span="12">其他费用</el-col>
          <el-col :span="8"></el-col>
          <el-col :span="4" class="amount">¥20</el-col>
        </el-row>

        <div class="total">
          <span>订单总价</span>
          <span class="price">¥{{ totalAmount }}</span>
        </div>

        <div class="submit">
          <el-button type="primary" @click="submitOrder">提交订单</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  name: 'OrderCreate',
  data() {
    return {
      carInfo: {},
      takeTime: '',
      getTime: ''
    }
  },
  
  computed: {
    totalAmount() {
      if (!this.carInfo.crent) return 0
      return this.carInfo.crent * 2 + 100 + 20
    }
  },
  
  created() {
    this.fetchCarInfo()
    // 设置默认时间
    const now = new Date()
    this.takeTime = this.formatDate(now)
    this.getTime = this.formatDate(new Date(now.getTime() + 24 * 60 * 60 * 1000))
  },
  
  methods: {
    // 获取车辆信息
    async fetchCarInfo() {
      try {
        const cid = this.$route.query.cid
        const res = await request.get(`/car/info/${cid}`)
        this.carInfo = res.data
      } catch (error) {
        this.$message.error('获取车辆信息失败')
      }
    },
    
    // 提交订单
    async submitOrder() {
      try {
        const params = {
          cid: this.carInfo.cid,
          cname: this.carInfo.cname,
          crent: this.totalAmount,
          takeTime: this.takeTime,
          getTime: this.getTime
        }
        
        await request.post('/order/create', params)
        this.$message.success('订单提交成功')
        this.$router.push('/user/orders')
      } catch (error) {
        this.$message.error('订单提交失败')
      }
    },
    
    // 格式化日期
    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    }
  }
}
</script>

<style lang="less" scoped>
.order-create {
  min-height: 100vh;
  background-color: #f5f5f5;

  .header {
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
    
    .logo {
      height: 50px;
      img {
        height: 100%;
      }
    }
  }

  .content {
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 20px;

    .order-info {
      margin-bottom: 20px;

      .car-info {
        display: flex;
        margin-bottom: 30px;
        
        .car-img {
          width: 300px;
          height: 200px;
          margin-right: 20px;
          
          .el-image {
            width: 100%;
            height: 100%;
            border-radius: 4px;
          }
        }

        .car-detail {
          h3 {
            margin: 0 0 10px;
            font-size: 24px;
          }
          p {
            color: #666;
            line-height: 1.5;
          }
        }
      }

      .store-info {
        .time-block {
          padding: 20px;
          background-color: #f8f8f8;
          border-radius: 4px;

          h4 {
            margin: 0 0 15px;
            color: #333;
            i {
              color: #409EFF;
            }
          }

          .time {
            font-size: 16px;
            color: #409EFF;
            margin-bottom: 10px;
          }

          .address {
            color: #666;
          }
        }
      }
    }

    .fee-detail {
      .fee-item {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        
        &:last-child {
          border-bottom: none;
        }

        .amount {
          text-align: right;
          color: #f56c6c;
        }
      }

      .total {
        margin-top: 20px;
        text-align: right;
        font-size: 16px;
        
        .price {
          margin-left: 20px;
          color: #f56c6c;
          font-size: 24px;
          font-weight: bold;
        }
      }

      .submit {
        margin-top: 20px;
        text-align: center;
        
        .el-button {
          width: 200px;
          height: 45px;
        }
      }
    }
  }
}
</style> 